<template>
  <div>
    <div
      ref="map"
      class="chart"
    ></div>
  </div>
</template>

<script>
import * as _ from 'lodash'
import 'echarts-liquidfill'
import * as echarts from 'echarts'
export default {
  name: 'WaterWave',
  props: {
    taskInTransitRate: {
      type: Number,
      default: null
    },
    taskInDeliveryRate: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    taskInTransitRate(newVal, oldVal) {
      if (this.taskInDeliveryRate) {
        const option = {
          series: [
            // 第一个
            {
              type: 'liquidFill', // 水位图
              radius: '70%', // 显示比例
              center: ['25%', '50%'], // 中心点
              amplitude: 10, // 水波振幅
              data: [newVal * 0.01], // data个数代表波浪数
              color: ['#e35c3f'], // 波浪颜色
              backgroundStyle: {
                color: '#ffe5e0' // 边框内部填充部分颜色
              },
              itemStyle: {
                opacity: 0.95,
                shadowColor: 'rgba(0, 0, 0, 0)'
              },
              label: {
                // 标签设置
                normal: {
                  position: ['50%', '50%'],
                  formatter: newVal + '%', // 显示文本,
                  textStyle: {
                    fontSize: '100px', // 文本字号,
                    color: '#333'
                  }
                }
              },
              outline: {
                show: true, // 是否显示轮廓 布尔值
                borderDistance: 10, // 外部轮廓与图表的距离 数字
                itemStyle: {
                  borderColor: '#e35c3f', // 边框的颜色
                  borderWidth: 1 // 边框的宽度
                }
              }
            },
            // 第二个
            {
              type: 'liquidFill', // 水位图
              radius: '70%', // 显示比例
              center: ['75%', '50%'], // 中心点
              amplitude: 10, // 水波振幅
              data: [this.taskInDeliveryRate * 0.01], // data个数代表波浪数
              color: ['#ffc45e'], // 波浪颜色
              backgroundStyle: {
                color: '#fff1d9' // 边框内部填充部分颜色
              },
              itemStyle: {
                opacity: 0.95,
                shadowColor: 'rgba(0, 0, 0, 0)'
              },
              label: {
                // 标签设置
                normal: {
                  position: ['50%', '50%'],
                  formatter: this.taskInDeliveryRate + '%', // 显示文本,
                  textStyle: {
                    fontSize: '100px', // 文本字号,
                    color: '#333'
                  }
                }

              },
              outline: {
                show: true, // 是否显示轮廓 布尔值
                borderDistance: 10, // 外部轮廓与图表的距离 数字
                itemStyle: {
                  borderColor: '#ffc45e', // 边框的颜色
                  borderWidth: 1 // 边框的宽度
                }
              }
            }
            // ------------------------------------------------------------
          ]
        }
        // // 基于准备好的dom，初始化echarts实例
        this.chart = echarts.init(this.$refs.map)
        // 使用刚指定的配置项和数据显示图表。
        this.chart.setOption(option)
        //  节流
        window.addEventListener('resize', this.resizeChart)
      }
    }
  },
  mounted() {},
  destroyed() {
    // 凡是挂载在windows上的事件，离开页面记得要清除销毁
    window.removeEventListener('resize', this.resizeChart)
  },
  methods: {
    // 节流自适应
    resizeChart: _.debounce(function() {
      this.chart.resize()
    }, 300)
  }
}
</script>

<style lang="scss" scoped>
.chart {
  height: 200px;
}
</style>
